<template>
  <div class="home">
    <div class="content-div">
      <div class="image-title">
        <ul class="title-list">
          <li class="title">RI FULL 全球一流的交易商</li>
          <li class="explain">开启您的交易新时代！</li>
          <li class="explain">超低交易成本 极速订单执行 资金安全保障</li>
        </ul>
      </div>
      <div class="our-strengths wow animate__animated animate__fadeInLeft">
        <div class="content-title mt120">每个我们的优势</div>
        <div class="wrapper">
          <ul class="strengths-list">
            <li><i class="right-icon"></i> 丰富的环球金融交易产品</li>
            <li><i class="right-icon"></i>先进高效的交易平台</li>
            <li><i class="right-icon"></i>超低的点差，清算级市场深度</li>
            <li>
              <i class="right-icon"></i>全设备支持：Windows、iOS、Mac、Andriod
            </li>
          </ul>
          <ul class="strengths-list ml160">
            <li><i class="right-icon"></i>100%资金安全隔离</li>
            <li><i class="right-icon"></i>极速订单执行，无感级的延迟</li>
            <li><i class="right-icon"></i>银行间深度流动性</li>
            <li><i class="right-icon"></i>全球金融市场服务经验</li>
          </ul>
        </div>
      </div>
      <div
        class="trading-product oh wow animate__animated animate__fadeIn animate__slow"
      >
        <div class="content-title">交易产品</div>
        <ul class="product-wrap">
          <li class="product-list">
            <div class="product-iocn">
              <img src="../../assets/images/product1.png" />
            </div>
            <div class="froex">Froex</div>
            <div class="product-link">外汇 >></div>
          </li>
          <li class="product-list">
            <div class="product-iocn">
              <img src="../../assets/images/product2.png" />
            </div>
            <div class="froex">Froex</div>
            <div class="product-link">外汇 >></div>
          </li>
          <li class="product-list">
            <div class="product-iocn">
              <img src="../../assets/images/product3.png" />
            </div>
            <div class="froex">Froex</div>
            <div class="product-link">外汇 >></div>
          </li>
          <li class="product-list">
            <div class="product-iocn">
              <img src="../../assets/images/product4.png" />
            </div>
            <div class="froex">Froex</div>
            <div class="product-link">外汇 >></div>
          </li>
          <li class="product-list">
            <div class="product-iocn">
              <img src="../../assets/images/product5.png" />
            </div>
            <div class="froex">Froex</div>
            <div class="product-link">外汇 >></div>
          </li>
          <li class="product-list product-list-last">
            <div class="product-link product-link-last">期待更多</div>
          </li>
        </ul>
      </div>
      <div class="downs oh wow animate__animated animate__zoomInLeft">
        <ul class="title-list mt230">
          <li class="title">MT4软件下载</li>
          <li class="explain">
            适用于Windows、OS X和移动设备的最强大的交易平台
          </li>
          <li class="btn">即刻下载</li>
        </ul>
      </div>
      <div class="four-step oh wow animate__animated animate__rotateInUpRight">
        <div class="content-title mt120">加入RI Full 仅需4步</div>
        <div class="rich-title">立即开启您的全球交易市场</div>
        <ul class="step-list-wrap">
          <li class="step-list">
            <div class="product-iocn">
              <img src="../../assets/images/product1.png" />
            </div>
            <div class="froex">Froex</div>
            <div class="product-link">外汇 >></div>
          </li>
          <li class="step-list">
            <div class="product-iocn">
              <img src="../../assets/images/product1.png" />
            </div>
            <div class="froex">Froex</div>
            <div class="product-link">外汇 >></div>
          </li>
          <li class="step-list">
            <div class="product-iocn">
              <img src="../../assets/images/product1.png" />
            </div>
            <div class="froex">Froex</div>
            <div class="product-link">外汇 >></div>
          </li>
          <li class="step-list">
            <div class="product-iocn">
              <img src="../../assets/images/product1.png" />
            </div>
            <div class="froex">Froex</div>
            <div class="product-link">外汇 >></div>
          </li>
        </ul>
        <div class="register-btn">即刻注册</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Home'
}
</script>
<style scoped>
.image-title {
  width: 100%;
  height: 730px;
  padding-top: 256px;
  box-sizing: border-box;
  background: url('../../assets/images/banner2.png') center top no-repeat;
  background-size: 100% 100%;
}
.title {
  font-size: 36px;
  color: #ffffff;
  text-align: center;
  font-family: AxisStd-Heavy;
  padding-bottom: 16px;
}
.explain {
  font-family: PingFangSC-Light;
  text-align: center;
  font-size: 36px;
  color: #ffffff;
  padding-bottom: 12px;
}
.our-strengths {
  width: 100%;
  height: 500px;
  overflow: hidden;
}
.strengths-list {
  font-family: PingFangSC-Regular;
  font-size: 17px;
  color: #6b6b6b;
  line-height: 42px;
}
.right-icon {
  display: inline-block;
  width: 24px;
  height: 19px;
  background: url('../../assets/images/right.png') center top no-repeat;
  background-size: 100% 100%;
}
.wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 109px;
}
.trading-product {
  width: 100%;
  height: 1080px;
  background: url('../../assets/images/tec.png') center top no-repeat;
  background-size: 100% 100%;
}
.product-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 65.5%;
  height: 57%;
  margin: 60px auto;
}
.product-list {
  width: 30%;
  height: 55%;
  background: #ffffff;
  box-shadow: 0 0 36px 2px rgba(195, 195, 195, 0.5);
  margin-right: 3%;
  margin-top: 30px;
}
.product-iocn {
  width: 70px;
  height: 70px;
  background-size: 100% 100%;
  margin: 60px auto 30px;
}
.product-iocn img {
  width: 70px;
  height: 70px;
}
.froex {
  font-family: STSongti-SC-Regular;
  font-size: 21px;
  color: #1e1e1e;
  text-align: center;
}
.product-link {
  color: #1e1e1e;
  text-align: center;
  margin-top: 20px;
  font-family: PingFangSC-Medium;
  font-size: 18px;
}
.product-list-last {
  display: table;
}
.product-list-last .product-link {
  vertical-align: middle;
  display: table-cell;
}
.downs {
  width: 100%;
  height: 730px;
  background: url('../../assets/images/downs.png');
  background-size: 100% 100%;
}
.btn {
  width: 135px;
  height: 40px;
  border: 1px solid #ffffff;
  border-radius: 1px;
  border-radius: 1px;
  text-align: center;
  line-height: 40px;
  color: #fff;
  margin: 20px auto;
  cursor: pointer;
}
.four-step {
  width: 100%;
  height: 650px;
}
.step-list-wrap {
  display: flex;
  justify-content: center;
  height: 40%;
}
.step-list {
  width: 15.9%;
  height: 100%;
  background: #ffffff;
  box-shadow: 0 0 36px 2px rgba(195, 195, 195, 0.5);
  border-radius: 1px;
  border-radius: 1px;
  margin-right: 20px;
  margin-top: 40px;
}
.rich-title {
  font-family: PingFangSC-Regular;
  font-size: 28px;
  color: #1e1e1e;
  text-align: center;
  margin-top: 30px;
}
.register-btn {
  background: #1e2e70;
  border-radius: 20px;
  border-radius: 20px;
  width: 170px;
  height: 40px;
  text-align: center;
  color: #ffffff;
  font-size: 14px;
  font-family: PingFangSC-Light;
  line-height: 40px;
  margin: 70px auto;
}
</style>
